<!-- 配置状态 -->
<template>
  <div>
    <el-dialog
      :title="stateRow.workStatus==0?'车辆启用':'车辆停用'"
      :visible.sync="isShowState"
      width="30%"
      :before-close="onClose"
    >
      <div v-if="stateRow.workStatus==0">
        <el-row
          type="flex"
          justify="start"
        >
          <div>确认要启用吗?车辆启用需要满足以下条件:</div>
        </el-row>
        <el-row
          type="flex"
          justify="start"
        >
          <span class="oneSpan">①车辆信息已完善</span>
          <span>②绑定司机>=2,且有排班</span>
        </el-row>

      </div>
      <div v-else>
        <el-row
          type="flex"
          justify="start"
          class="oneRow"
        >
          <div>确认要停用吗?车辆停用需要满足以下条件:</div>
        </el-row>
        <el-row
          type="flex"
          justify="start"
        >
          <span class="oneSpan">①车辆当前无运输任务</span>
          <span>②车辆无关联运输路线</span>
        </el-row>
        <el-row
          type="flex"
          justify="start"
        >
          <div class="zhushi">注：停用后司机将自动解除绑定</div>
        </el-row>
      </div>
      <!-- 按钮 -->
      <template #footer>
        <el-row
          type="flex"
          justify="end"
        >
          <el-button
            type="danger"
            size="mini"
            @click="submit"
          >确定</el-button>
          <el-button
            size="mini"
            @click="onClose"
          >取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { truckStatusUse, truckStatusNoUse } from '@/api/transit'
export default {
  name: 'VehicleState',
  props: {
    isShowState: {
      type: Boolean,
      default: false
    },
    stateRow: { type: Object, default: () => {} }
  },
  methods: {
    onClose() {
      this.$emit('update:isShowState', false)
      this.$message.info('已取消')
    },
    async submit() {
      if (this.stateRow.workStatus === 0) {
        // 启用
        try {
          const res = await truckStatusUse(this.stateRow.id)
          if (res.code === 200) {
            this.$message.success('启用车辆成功')
            this.$emit('update:isShowState', false)
            this.$emit('update-state')
          } else {
            this.$message.warning(res.msg)
            this.$emit('update:isShowState', false)
          }
        } catch (error) {
          console.log(error)
        }
      } else {
        try {
          // 禁用
          const res = await truckStatusNoUse(this.stateRow.id)
          if (res.code === 200) {
            this.$emit('update:isShowState', false)
            this.$message.success('禁用车辆成功')
            this.$emit('update-state')
          } else {
            this.$message.error(res.msg)
            this.$emit('update:isShowState', false)
          }
        } catch (error) {
          console.log(error)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.oneRow{
  margin-top: 0px;
}
.oneSpan{
  margin-right: 100px;
}
.el-row{
  margin-top: 15px;
}
.zhushi{
  color: #ffb915;
}
.serchBox {
  width: 584px;
  margin: 0 auto;
  margin-top: 19px;
  .el-select {
    width: 238px;
  }
  margin-bottom: 20px;
}
.workTime {
  white-space: nowrap;
}
.header {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  width: 584px;
  height: 90px;
  background-color: #fbfafa;
  flex-wrap: wrap;
  padding: 21px 52px;
  margin: 0 auto;
  // 使得整体内容距离上部分的距离为20px
  margin-top: -10px;
  .el-input {
    width: 240px;
  }
  div {
    flex: 40%;
     // 使包裹的所有div的上下间距为14px
    // margin-bottom: 14px;
  }
  .num,
  .iphone{
    flex: 60%;
  }
  .num,.name{
    margin-bottom: 14px;
  }
  label {
    width: 71px;
    height: 20px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #20232A;
    letter-spacing: 0.16px;
    text-align: right;
  }
  span {
    color: #818693;
    font-size: 14px;
  }
}
.pagination {
  margin: 32px 0 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #20232a !important;
}
.selected-driver {
  margin-top: 18px;
}
</style>
